<template>
	<div class="wrapper">
	  <!-- header部分 -->
	  <header>
		<p>商家注册</p>
	  </header>
  
	  <!-- 表单部分 -->
	  <ul class="form-box">
		<li>
		  <div class="title">5位商家编号：</div>
		  <div class="content">
			<input
			  type="number"
			  @blur="checkBusinessId"
			  v-model="business.businessId"
			  placeholder="5位商家编号"
			/>
		  </div>
		</li>
		<li>
		  <div class="title">密码：</div>
		  <div class="content">
			<input type="password" v-model="business.password" placeholder="密码" />
		  </div>
		</li>
		<li>
		  <div class="title">确认密码：</div>
		  <div class="content">
			<input type="password" v-model="confirmPassword" placeholder="确认密码" />
		  </div>
		</li>
		<li>
		  <div class="title">商家名称：</div>
		  <div class="content">
			<input type="text" v-model="business.businessName" placeholder="商家名称" />
		  </div>
		</li>
		<li>
		  <div class="title">商家地址：</div>
		  <div class="content">
			<input type="text" v-model="business.businessAddress" placeholder="商家地址" />
		  </div>
		</li>
		<li>
		  <div class="title">商家介绍：</div>
		  <div class="content">
			<input type="text" v-model="business.businessExplain" placeholder="商家介绍" />
		  </div>
		</li>
		<li>
		  <div class="title">点餐类别：</div>
		  <div class="content" style="font-size: 3vw;">
			<input
			  type="radio"
			  v-model="business.orderTypeId"
			  value="1"
			  style="width:6vw;height: 3.2vw;"
			/>美食
			<input
			  type="radio"
			  v-model="business.orderTypeId"
			  value="2"
			  style="width:6vw;height: 3.2vw;"
			/>早餐
			<input
			  type="radio"
			  v-model="business.orderTypeId"
			  value="3"
			  style="width:6vw;height: 3.2vw;"
			/>跑腿代购
			<input
			  type="radio"
			  v-model="business.orderTypeId"
			  value="4"
			  style="width:6vw;height: 3.2vw;"
			/>汉堡披萨
			<input
			  type="radio"
			  v-model="business.orderTypeId"
			  value="5"
			  style="width:6vw;height: 3.2vw;"
			/>甜品饮品
			<!-- 省略其他点餐类别 -->
		  </div>
		</li>
		<li>
		  <div class="title">起送费：</div>
		  <div class="content">
			<input type="text" v-model="business.starPrice" placeholder="起送费" />
		  </div>
		</li>
		<li>
		  <div class="title">配送费：</div>
		  <div class="content">
			<input type="text" v-model="business.deliveryPrice" placeholder="配送费" />
		  </div>
		</li>
		<li>
		  <div class="title">备注：</div>
		  <div class="content">
			<input type="text" v-model="business.remarks" placeholder="备注" />
		  </div>
		</li>
	  </ul>
  
	  <div class="button-login">
		<button @click="register">注册</button>
	  </div>
  
	  <!-- 底部菜单部分 -->
	  <Footer />
	</div>
  </template>
  
  <script>
  import { reactive, ref } from 'vue';
  import Footer from '../components/Footer.vue';
  import axios from 'axios';
  import qs from 'qs';
  import { useRouter } from 'vue-router';
  
  export default {
	name: 'BusinessRegister',
	components: {
	  Footer,
	},
	setup() {
	  const router = useRouter();
	  const business = reactive({
		businessId: '',
		businessName: '',
		businessAddress: '',
		businessExplain: '',
		orderTypeId: '',
		starPrice: '',
		deliveryPrice: '',
		remarks: '',
		password: '',
	  });
  
	  const confirmPassword = ref('');
  
	  const checkBusinessId = async () => {
		try {
			const response = await axios.get(`/Business/businessId/${business.businessId}`);
			if (response.data === null) {
				business.businessId = '';
				alert('此商家编号已存在！');
			}
			} catch (error) {
			console.error(error);
			alert('出错！');
			}
		};
  
	  const register = async () => {
		if (business.businessId === '') {
		  alert('商家编号不能为空！');
		  return;
		}
		if (business.password === '') {
		  alert('密码不能为空！');
		  return;
		}
		if (business.businessId < 10000 || business.businessId >= 100000) {
			alert('商家编号格式不对！');
			return;
		}
		if (business.password.length < 6) {
		  alert('密码不能少于6位！');
		  return;
		}
		if (business.password !== confirmPassword.value) {
		  alert('两次输入的密码不一致！');
		  return;
		}
		if (business.businessName === '') {
		  alert('商家名称不能为空！');
		  return;
		}
  
  
		axios
			.post('/Business', qs.stringify(business)) // 使用qs序列化数据
			.then(response => {
			if (response.data > 0) {
				alert('注册成功！');
				router.go(-1);
			} else {
				alert('注册失败！');
			}
			})
			.catch(error => {
				console.error(error);
			});
	  };
  
	  return {
		business,
		confirmPassword,
		checkBusinessId,
		register,
	  };
	},
  };
  </script>

<style scoped>
	/****************** 总容器 ******************/
	.wrapper {
		width: 100%;
		height: 100%;
	}

	/****************** header部分 ******************/
	.wrapper header {
		width: 100%;
		height: 12vw;
		background-color: #0097FF;
		color: #fff;
		font-size: 4.8vw;

		position: fixed;
		left: 0;
		top: 0;
		z-index: 1000;

		display: flex;
		justify-content: center;
		align-items: center;
	}

	/****************** 表单部分 ******************/
	.wrapper .form-box {
		width: 100%;
		margin-top: 12vw;
	}

	.wrapper .form-box li {
		box-sizing: border-box;
		padding: 4vw 3vw 0 3vw;
		display: flex;
		align-items: center;
	}

	.wrapper .form-box li .title {
		flex: 0 0 18vw;
		font-size: 3vw;
		font-weight: 700;
		color: #666;
	}

	.wrapper .form-box li .content {
		flex: 1;
	}

	.wrapper .form-box li .content input {
		border: none;
		outline: none;
		width: 100%;
		height: 4vw;
		font-size: 3vw;
	}

	.wrapper .button-login {
		width: 100%;
		box-sizing: border-box;
		padding: 4vw 3vw 0 3vw;
	}

	.wrapper .button-login button {
		width: 100%;
		height: 10vw;
		font-size: 3.8vw;
		font-weight: 700;
		color: #fff;
		background-color: #38CA73;
		border-radius: 4px;

		border: none;
		outline: none;
	}

	.wrapper .button-register {
		width: 100%;
		box-sizing: border-box;
		padding: 4vw 3vw 0 3vw;
	}

	.wrapper .button-register button {
		width: 100%;
		height: 10vw;
		font-size: 3.8vw;
		font-weight: 700;
		color: #666;
		background-color: #EEE;
		border-radius: 4px;

		border: none;
		outline: none;
		border: solid 1px #DDD;
	}
</style>